import React from 'react'
import { Form, Button, Select, DatePicker } from 'antd'
import moment from 'moment'
import 'moment/locale/zh-cn'
import locale from 'antd/es/date-picker/locale/zh_CN'
function OrderForm(props) {
  const [form] = Form.useForm()
  const onFinish = (values) => {
    console.log('Finish:', values)
    props.chooseCity(values)
  }
  function onChange(dates, dateStrings) {
    console.log('From: ', dates[0], ', to: ', dates[1])
    console.log('From: ', dateStrings[0], ', to: ', dateStrings[1])
  }
  const onReset = () => {
    form.resetFields()
  }
  const { RangePicker } = DatePicker
  const { Option } = Select
  return (
    <Form form={form} name="city_form" layout="inline" onFinish={onFinish}>
      {/* 城市  */}
      <Form.Item name="select_city" label="城市" className="cityControl">
        <Select placeholder="请选择城市">
          <Option value="全部">全部</Option>
          <Option value="北京市">北京市</Option>
          <Option value="天津市">天津市</Option>
          <Option value="深圳市">深圳市</Option>
        </Select>
      </Form.Item>
      {/* 时间模式 */}
      <Form.Item name="select_date" label="订单时间" className="cityControl">
        <RangePicker
          ranges={{
            Today: [moment(), moment()],
            'This Month': [moment().startOf('month'), moment().endOf('month')],
          }}
          locale={locale}
          onChange={onChange}
        />
      </Form.Item>

      {/* 加盟商授权状态 */}
      <Form.Item name="select_state" label="订单状态" className="cityControl">
        <Select placeholder="请选择订单状态">
          <Option value="全部">全部</Option>
          <Option value="进行中">进行中</Option>
          <Option value="全部完成">全部完成</Option>
        </Select>
      </Form.Item>
      {/* 重置 */}
      <Form.Item>
        <Button
          type="primary"
          onClick={onReset}
          style={{ height: '32px', width: '120px' }}
        >
          重置
        </Button>
      </Form.Item>
      {/* 查询 */}
      <Form.Item>
        <Button type="primary" htmlType="submit" className="submitbutton">
          查询
        </Button>
      </Form.Item>
    </Form>
  )
}

export default OrderForm
